
import React from 'react'
import { inject, observer } from 'mobx-react'
import XiaLa from '../../../component/promotion/XiaLaXuanZe'
import { Input, Button, Transfer, Select } from 'antd'
import { withRouter } from 'react-router-dom';
import axios from '../../../utils/http'


const { Option } = Select;




@inject('xinJianYouHuiJuan')
@observer
@withRouter
class LssueCoupons extends React.Component {


    constructor(props){
        super(props)
        this.state = {
            allTypeData:this.props.xinJianYouHuiJuan.allTypeData,
            selTypeAll : []
        }
        
    }

    componentWillMount(){
        this.props.xinJianYouHuiJuan.selGoodsType().then(data=>{
            // this.state.selTypeAll = data
            this.setState({selTypeAll:data})
        })
    }

    state = {
        mockData: [],
        targetKeys: [],
    };

    componentDidMount() {
        this.getMock();
    }

    getMock = () => {
        const targetKeys = [];
        const mockData = [];
        for (let i = 0; i < 20; i++) {
            const data = {
                key: i.toString(),
                title: `content${i + 1}`,
                description: `description of content${i + 1}`,
                chosen: Math.random() * 2 > 1,
            };
            if (data.chosen) {
                targetKeys.push(data.key);
            }
            mockData.push(data);
        }
        this.setState({ mockData, targetKeys });
    };

    filterOption = (inputValue, option) => option.description.indexOf(inputValue) > -1;

    

    handleSearch = (dir, value) => {
        console.log('search:', dir, value);
    };


    render() {
        let rightList=[]
        // this.props.xinJianYouHuiJuan.selGoodsType()
        let { faFangData,insertStart,faFangFrom,allTypeData,selTypeGoodsList,allTypeGoods } = this.props.xinJianYouHuiJuan
        let couponType = this.props.location.search.split('=')[1]
        console.log(couponType)
        let xiaLaData = [
            { goodsId: 1, goodsName: 'haha' },
            { goodsId: 2, goodsName: 'haha' },
            { goodsId: 3, goodsName: 'haha' },
        ]

        let Change = (id) => {
            console.log(id)
        }

        let xiaLaDataa = {}

        let handleChange = (e)=>{
            selTypeGoodsList(e)
            insertStart('goodsCid',e)
        }

        let chuanSuoKuang = (e)=>{
            console.log(e)
            rightList.push(e)
        }

        let temp
        if (couponType === '2') {//商品发放
            temp = <div>
                <div className="itemContentRow">
                    <Select placeholder="请选择分类" style={{ width: 120 }} onChange={handleChange}>
                        {allTypeData.map(item=>{
                            return <Option key={item.goodsCid} value={item.goodsCid}>{item.goodsCname}</Option>
                        })}
                    </Select>
                    <XiaLa xiaLaData={allTypeGoods} Change={Change}></XiaLa>
                    <Button type="primary">搜索</Button>
                </div>
                <div className="itemContentRow" >
                    <Transfer
                        dataSource={allTypeGoods}
                        filterOption={this.filterOption}
                        targetKeys={rightList}
                        onChange={chuanSuoKuang}
                        onSearch={this.handleSearch}
                        render={item => item.goodsCname}
                    />
                </div>

                <div className="itemContentRow inputMinWidth">
                    <span style={{width:"150px"}}>优惠卷数量：</span>
                    <Input ></Input>
                </div>
                <div className="itemContentRow">
                <Button type="primary">确定</Button>
                </div>
            </div>
        } else if (couponType === '1') {//用户发放
            temp = <div>

            </div>
        } else {
            temp = <div>
                <div className="itemContentRow">
                    名称金额：
                    <XiaLa xiaLaData={xiaLaData} Change={Change} />
                </div>
                <div className="inputMinWidth itemContentRow">
                    <span style={{ width: '150px' }}>优惠卷数量：</span>
                    <Input />
                </div>
                <div className="itemContentRow">
                    <p>提示：优惠卷序列号由六位序列号种子加上四位随机数字组成</p>
                </div>
                <Button type="primary">确定</Button>
            </div>
        }
        return (
            <div>
                {console.log(this.state.allTypeData)}
                <h1>发放优惠卷(线下发放)</h1>
                {temp}

            </div>
        )
    }
}

export default LssueCoupons